<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="新闻"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div style="margin: 1rem;">
            <div style="text-align: center; font-size: 24px;">
                <span>{{ news.title }}</span>
            </div>
            <div style="text-align: center; margin-top: 10px;"><span>{{ news.addtime }}</span></div>
            <div v-html="news.content"></div>
        </div>
    </div>
</template>


<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getNews } from '@/requests/index';


const router = useRouter();
const route = useRoute();
const news = ref({
    title: "",
    title_en: "",
    cover: "",
    content: "",
    content_en: "",
    addtime: ""
});


const getSingleNews = async () => {
    const res = await getNews({ "id": route.query.id });
    if (res.status === 2000) {
        news.value = res.data;
    } else {
        console.log(res.msg);
    }
}
getSingleNews();
const onClickLeft = () => history.back();
</script>